import React from 'react';
import ReactDOM from 'react-dom';
import store from './store'
// import { Provider, connect } from 'react-redux'
import { Provider, connect } from './myreact-redux'
class App extends React.Component {
  componentDidMount() {
    this.clear = store.subscribe(() => {
      this.setState({})
    })
  }
  componentWillUnmount() {
    this.clear()
  }
  render() {
    return <div className=''>
      <h1 style={{
        color: store.getState().color.color
      }}>{store.getState().count.count}</h1>
      <button onClick={() => { store.dispatch({ type: 'add', num: 15 }) }}>+</button>
      <input type="color" onChange={(e) => {
        store.dispatch({ type: 'changeColor', col: e.target.value })
      }} />
    </div>;
  }
}
class App2 extends React.Component {
  qq = (val) => {
    return (dispatch) => {
      setTimeout(() => {
        dispatch({ type: 'changeColor', col: val })
      }, 2000);

    }
  }
  render() {
    // console.log(this.props)
    return <div className=''>
      <h1 style={{
        color: this.props.color
      }}>{this.props.count}</h1>
      <button onClick={() => { this.props.dispatch({ type: 'add', num: 15 }) }}>+</button>
      <input type="color" onChange={(e) => {
        this.props.dispatch(this.qq(e.target.value))
      }} />
    </div>;
  }
}
App2 = connect((state) => {
  console.log(state.count)
  return {
    count: state.count.count,
    color: state.color.color
  }
}, (dispatch) => ({ dispatch }))(App2)

ReactDOM.render(<Provider store={store}>
  <App2 className="box" />
</Provider>, document.getElementById('root'))